
<link rel="stylesheet" href="<?php base_url() ?>assets/css/application/choose.css">
<div class="page-titl">
	<div class="wrapper">
		<h1>TRẮC NGHIỆM LỊCH SỬ</h1>
	</div>
</div>
<div class="content">
	<div class="choosetest tabs">
		<div class="wrapper">
			<ul class="option-list nav nav-tabs">
				<li role="presentation" ng-class="{active: viewSection==1}">
					<a href="" ng-click="viewSection=1">Chọn đề</a>
				</li>
				<li role="presentation"  ng-class="{active: viewSection==2}">
					<a href="" ng-click="viewSection=2">Ngẫu nhiên</a>
				</li>
				<li role="presentation"  ng-class="{active: viewSection==3}">
					<a href="" ng-click="viewSection=3">Làm bài</a>
				</li>
			</ul>
		</div>
	</div>

	<div class="choosetest sections">
		<div class="heading" ng-show="viewSection==3">
			<div class="wrapper">
				<div class="info">
					<span ng-hide="status=='complete'">{{questionList.length}} câu</span>
					<span ng-show="status=='complete'">K.quả: {{score}}</span>
				</div>
				<div class="control">
					<span class="glyphicon glyphicon-play text-primary" ng-show="status=='stop'||status=='complete'" ng-click="startTest()"></span> &nbsp; &nbsp;
					<button class="btn btn-primary" ng-show="status=='start'"
						data-toggle="modal" data-target="#confirmExam">
						Hoàn thành</button>
				</div>
				<div class="time">{{time.minute}}:{{time.second}}</div>
				<div class="clearfix"></div>
			</div>
		</div>

		<div class="wrapper">
			<!-- select set of question -->
			<div class="section sets" ng-show="viewSection=='1'">
				<ul class="categories-list">
					<li ng-repeat="cat in qGroups">
						<p class="cat-titl">{{cat.name}}</p>

						<ul class="groups">
							<li class="gr" ng-repeat="group in cat.groups" ng-click="getExam(group)">
								<p class="group">Đề {{$index+1}}</p>
								<p class="length">({{group.length}} câu)</p>
							</li>
						</ul>
					</li>
				</ul>
			</div>

			<!-- select random questions -->
			<div class="section random" ng-show="viewSection=='2'">
				<p>
					Chọn số câu: <br>
						<input type="radio" ng-model="numQuestion" value="8"> 8 câu - 5 phút &nbsp; | &nbsp;
						<input type="radio" ng-model="numQuestion" value="10"> 10 câu - 10 phút &nbsp; | &nbsp;
						<input type="radio" ng-model="numQuestion" value="20"> 20 câu - 15 phút

				</p><hr>
				<ul class="categories-list">
					<li ng-repeat="cat in qData | removeEmptyQuestion" ng-click="toggleCat($index)">
						<p class="cat-titl" ng-class="{selected: randomList[$index]==true}">
							{{cat.name}}
							<span class="symbol glyphicon glyphicon-ok" ng-show="randomList[$index]==false"></span>
							<span class="symbol glyphicon glyphicon-remove" ng-show="randomList[$index]==true"></span>
						</p>
					</li>
				</ul>
				<p>
					<button class="btn btn-primary" ng-click="getRandomExam()">LÀM BÀI</button>
				</p>
			</div>

			<!-- test -->
			<div class="section test" ng-show="viewSection=='3'">
				<ul class="question-list">
					<li class="question" ng-repeat="qs in questionList">
						<p class="content">Câu {{$index+1}}: {{qs.question}}</p>
						<p class="option optA" 
							ng-class="{selected: answerList[$index]=='optA', result: qs.result=='optA'&&status=='complete'}" 
							ng-click="choose($index,'optA')"><strong>A</strong>: {{qs.optA}}</p>
						<p class="option optB" 
							ng-class="{selected: answerList[$index]=='optB', result: qs.result=='optB'&&status=='complete'}" 
							ng-click="choose($index,'optB')"><strong>B</strong>: {{qs.optB}}</p>
						<p class="option optC" 
							ng-class="{selected: answerList[$index]=='optC', result: qs.result=='optC'&&status=='complete'}" 
							ng-click="choose($index,'optC')"><strong>C</strong>: {{qs.optC}}</p>
						<p class="option optD" 
							ng-class="{selected: answerList[$index]=='optD', result: qs.result=='optD'&&status=='complete'}" 
							ng-click="choose($index,'optD')"><strong>D</strong>: {{qs.optD}}</p>
					</li>
				</ul>				
				<hr>
			</div>
		</div>
	</div>
</div>

<!-- =============================================================================== -->
<div id="confirmExam" class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">&times;</span>
					<span class="sr-only">Close</span>
				</button>
				<h4 class="modal-title">XÁC NHẬN</h4>
			</div>
			<div class="modal-body">
				<p>
					Hãy kiểm tra lại bài, thời gian vẫn còn. <br>
					Bạn đồng ý hoàn thành bài thi chứ?
				</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Bỏ qua</button>
				<button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="scoreAct()">Đồng ý</button>
			</div>
		</div>
	</div>
</div>
